<template>
  <div class="tab">
    <van-tabs class="tab__tabs" v-model="active" line-height="0">
      <template v-slot:default>
        <van-tab title="订阅" name="register" title-class="tab__tabs__left">
          <template v-slot:title>
            <div :class="['tab__tabs__text',{'tab__tabs__text--active':active==='register'}]">
              订阅
            </div>
          </template>
        </van-tab>
        <van-tab title="推荐" name="recommend" title-class="tab__tabs__right">
          <template v-slot:title>
            <div :class="['tab__tabs__text',{'tab__tabs__text--active':active==='recommend'}]">
              推荐
            </div>
          </template>
          <template>
            <SearchBar></SearchBar>
            <div class="tab__tabs__right__container" :style="{'height':containerHeight+'px'}">
              <slot></slot>
            </div>
          </template>
        </van-tab>
      </template>
      <template v-slot:nav-left>
        <div class="tab__tabs__nav">
          <van-image class="tab__tabs__nav__img" src="https://fast-learn-oss.youbaobao.xyz/tb/hongbao.png" />
          <div class="tab__tabs__nav__text">签到</div>
        </div>
      </template>
      <template v-slot:nav-right>
        <div class="tab__tabs__nav">
          <van-image class="tab__tabs__nav__img" src="https://fast-learn-oss.youbaobao.xyz/tb/qrcode.png" />
          <div class="tab__tabs__nav__text">会员码</div>
        </div>
      </template>
    </van-tabs>
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue';

export default {
  components: {
    SearchBar,
  },
  data() {
    return {
      active: 'recommend',
      containerHeight: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      const tabText = document.getElementsByClassName('tab__tabs__text')[0];
      const bottomBar = document.getElementsByClassName('bottom-bar')[0];
      const layout = document.getElementsByClassName('layout')[0];
      const tab = document.getElementsByClassName('tab')[0];
      const searchBar = document.querySelector('.search-bar');
      const layoutH = layout.getBoundingClientRect().height;
      const tabTextH = tabText.getBoundingClientRect().height;
      const searchBarH = searchBar.getBoundingClientRect().height;
      const bottomBarH = bottomBar.getBoundingClientRect().height;
      const tabStyle = window.getComputedStyle(tab);
      const searchBarStyle = window.getComputedStyle(searchBar);
      const tabTop = +tabStyle.paddingTop.replace('px', '');
      const searchBarTop = +searchBarStyle.marginTop.replace('px', '');
      const searchBarBottom = +searchBarStyle.marginBottom.replace('px', '');
      const containerH = layoutH - tabTop - tabTextH - searchBarH - searchBarTop - searchBarBottom
      - bottomBarH;
      this.containerHeight = containerH;
      console.log('containerH', containerH);
    });
  },

};
</script>

<style lang="less">
.tab__tabs__left {
  justify-content: flex-end;
  margin-right: 26px;
}
.tab__tabs__right {
  justify-content: flex-start;
  margin-left: 26px;
  &__container{
    overflow: auto;
    &::-webkit-scrollbar{
      display: none;
    }
  }
}

.tab__tabs__text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  height: 52px;
  color: #ffffff;
  font-weight: 400;
}
.tab__tabs__text--active {
  font-size: 38px;
  color: #fff;
  letter-spacing: 0;
  font-weight: 500;
}
.van-tabs__nav--line {
  background: transparent;
}
</style>
<style lang="less" scope>
.tab {
  padding-top: 22px;
  &__tabs {
    &__nav {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4px 9px 4px 6px;
      background-image: linear-gradient(180deg, #feede0 0%, #feece0 100%);
      box-shadow: 0px 2px 4px 0px rgba(103, 0, 8, 0.15);
      border-radius: 26px;
      &__img {
        width: 44px;
        height: 44px;
      }
      &__text {
        font-size: 22px;
        color: #ff5000;
        letter-spacing: 0;
        font-weight: 500;
        margin-left: 7px;
      }
    }
  }
}
</style>>
